{extend name='base'/}

{block name='main'}
<style>
    .empty {
        padding: 90px 0 0 495px;
        background: url(__IMG__/empty.png) 90px 46px no-repeat;
        height: 190px;
        box-sizing: content-box;
    }

    .empty p {
        font-size: 14px;
        color: #8a8888
    }

    .empty a.btn {
        width: 116px;
        height: 38px;
        display: inline-block;
        background-color: #ff2832;
        color: #fff;
        text-align: center;
        font-size: 18px;
        margin: 30px 20px 0 0;
        border-radius: 2px;
    }

    .empty a.btn:hover, .login_tip .btn:hover {
        background-color: #d21f2b
    }

    .table {
        font-size: 13px;
    }

    .table td {
        vertical-align: middle;
    }

    .book-img {
        width: 50px;
        height: 70px;
    }

    .price {
        font-size: 1.3rem;
    }

    .shopping_procedure {
        width: 100%;
    }
</style>
<div class="row m-0">
    {if count($cart) > 0}
    <!--<div class="shopping_procedure mt-3">-->
        <!--<span><a href="{:url('Cart/index')}">我的购物车</a></span><span class="current">填写订单</span><span>完成订单</span>-->
        <!--<div class="alert alert-secondary" role="alert">-->
            <!--我的购物车-->
        <!--</div>-->
    <!--</div>-->

    <div class="table-responsive mt-3">
        <table class="table">
            <thead>
            <tr>
                <th width="80"><input type="checkbox" checked style="vertical-align: -1px;" class="checkAll"
                                      id="checkAll">&nbsp;&nbsp;<label class="m-0" for="checkAll">全选</label></th>
                <th width="70">封面</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>金额</th>
                <th width="80">操作</th>
            </tr>
            </thead>
            <tbody>
            {foreach $cart as $k => $v}
            <tr>
                <td>
                    <input type="checkbox" checked class="checkbox-child" data-price="{$v['price']}"
                           data-number="{$v['number']}" value="{$v['id']}">
                </td>
                <td>
                    <img src="{$v['thumb']}" class="book-img">
                </td>
                <td>{$v['bname']}</td>
                <td>{$v['price']}</td>
                <td>{$v['number']}</td>
                <td class="text-danger">¥{$v['price'] * $v['number']}</td>
                <td>
                    <a href="javascript:void(0);" onclick="delCart('{$v["id"]}')" class="btn btn-link btn-danger btn-sm btn-outline-light">删除</a>
                </td>
            </tr>
            {/foreach}
            </tbody>
        </table>
    </div>
    <div class="row w-100 m-0 mb-3">
        <div class="col-5"></div>
        <div class="col-7 text-right d-flex justify-content-end align-items-center">
            <div class="mr-3 text-muted" style="font-size: 12px;">合计：<span id="total_price" class="price text-danger">¥0.00</span>
            </div>
            <a href="javascript:void(0);" id="checkout_btn" class="btn btn-danger btn-sm">结&nbsp;&nbsp;&nbsp;&nbsp;算</a>
        </div>
    </div>
    {else}
    <div class="empty" id="empty">
        <p class="m-0">您的购物车还是空的，您可以：</p>
        <a href="{:url('Index/index')}" class="btn">去逛逛</a>
    </div>
    {/if}
</div>
{/block}

{block name='js'}
<script>
    $(function () {
        getTotalPrice();

        $("#checkAll").on('click', function () {
            if ($(this).prop('checked')) {
                $('.checkbox-child').prop('checked', true);
            } else {
                $('.checkbox-child').prop('checked', false);
            }
            getTotalPrice();
        });

        $("#checkout_btn").on('click', function () {
            let cartidArr = [];
            $('.checkbox-child').each(function (k, v) {
                if ($(this).prop('checked')) {
                    cartidArr.push($(this).val());
                }
            });
            if (cartidArr.length == 0) {
                return false;
            }
            window.location.href = "{:url('Cart/checkout')}?cartid=" + cartidArr.join(',');
        });
    });

    function getTotalPrice() {
        let total_price = 0;
        $('.checkbox-child').each(function (k, v) {
            if ($(this).prop('checked')) {
                total_price += $(this).data('price') * $(this).data('number');
            }
        });
        $("#total_price").html('¥' + total_price.toFixed(2));
        if (total_price == 0) {
            $('#checkout_btn').addClass('disabled');
        } else {
            $('#checkout_btn').removeClass('disabled');
        }
    }

    function delCart(id) {
        common('确定要删除该商品吗？', "{:url('Cart/del')}?id=" + id);
    }
</script>
{/block}